<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Center</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="24">
                <el-col :span="4"><el-image src="https://z1.muscache.cn/pictures/f78e9e8a-236f-4b4d-bac3-71a56e1e4deb.jpg"></el-image></el-col>
                <el-col :span="4" :offset="16">
                    <div class="block">
                        <el-dropdown @command="handleCommand">
                            <el-button type="primary" th:text="*{user.username}" icon="el-icon-arrow-down el-icon--right"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="toCenter">Center</el-dropdown-item>
                                <el-dropdown-item command="logout">Log out</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="host_name"
                        label="Host Name">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="Content">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="Date"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="User"
                        width="180">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="Action"
                        width="100">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" @click="toEdit(row._id, row.content)">Edit</el-button>
                        <el-button type="text" size="small" @click="deleteCom(row._id)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </el-main>
    </el-container>
    <el-dialog title="Edit" :visible.sync="editVisible" width="30%">
        <el-form :model="form" :rules="rules" ref="editComForm">
            <el-form-item label="Content" prop="content">
                <el-input placeholder="Leave your opinion" type="textarea" v-model="form.content" class="input-with-select" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">Cancel</el-button>
            <el-button type="primary" @click="editCom">Submit</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    ELEMENT.locale(ELEMENT.lang.en)
</script>
<script>
    new Vue({
        el: '#app',
        data: () => {
            return {
                editVisible: false,
                form:{
                    id: '',
                    content: ''
                },
                currentPage: 1,
                tableData: [],
                total: 0,
                rules: {
                    content: [
                        { required: true, message: 'Please enter the content', trigger: 'change' }
                    ]
                },
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                $.ajax({
                    url: '/getMyCom'
                    ,type: 'post'
                    ,data: {pageNum: this.currentPage}
                    ,dataType: 'json'
                    ,success: (data) => {
                        if (data.code === 0){
                            this.tableData = data.data.com || []
                            this.total = data.data.total || 0
                        } else {
                            this.tableData = []
                            this.total =  0
                            this.$message.error(data.message)
                        }
                    }
                })
            },
            handleCommand(command) {
                location.href = `/${command}`
            },
            toEdit(id, val){
                this.form = {
                    id: id,
                    content: val
                }
                this.editVisible = true
            },
            editCom(){
                this.$refs['editComForm'].validate(valid => {
                    if (valid) {
                        $.ajax({
                            url: '/editCom'
                            ,type: 'post'
                            ,data: this.form
                            ,dataType: 'json'
                            ,success: (data) => {
                                if (data.code === 0){
                                    this.$message.success(data.message)
                                    setTimeout(() => {
                                        location.reload()
                                    }, 1000)
                                } else {
                                    this.$message.error(data.message)
                                }
                            }
                        })
                    }
                })
            },
            deleteCom(id){
                $.ajax({
                    url: '/deleteCom'
                    ,type: 'post'
                    ,data: {id: id}
                    ,dataType: 'json'
                    ,success: (data) => {
                        if (data.code === 0){
                            this.$message.success(data.message)
                            setTimeout(() => {
                                location.reload()
                            }, 1000)
                        } else {
                            this.$message.error(data.message)
                        }
                    }
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getData()
            }
        }
    })
</script>
<style>
    .image {
        width: 100%;
        display: block;
    }
    .el-header{
        color: #333;
        text-align: center;
        height: 10vh;
        padding: 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height: 90vh;
        padding: 0;
    }
</style>

</html>
